<!--
 * @Author: 宋绍华
 * @Date: 2024-11-15 10:10:12
 * @LastEditors: 宋绍华
 * @LastEditTime: 2024-12-20 11:35:40
 * @FilePath: \sr_system_manager_ui\src\components\AuditRecordDrawer\index.vue
 * @Description: 
-->
<template>
  <el-drawer append-to-body modal-class="auditRecordDrawerClass" v-model="props.visible"
    :before-close="() => $emit('update:visible', false)" title="审核记录">
    <template #default>
      <div class="content">
        <div class="content-list" v-if="list.length > 0" ref="contentRef">
          <div class="content-list__item" :class="{ 'content-list__item-fail': [2,3].includes(item.status) }" v-for="item in list"
            :key="item.id">
            <div class="content-list__item-l">
              <div class="content-list__item-action">{{ item.typeName }} {{ item.createdTime }}</div>
              <div class="content-list__item-opt">{{ item.createdByName }}：<span :class="`content-list__item-opt-${item.status}`">{{ item.statusName }}</span></div>
            </div>
            <div class="content-list__item-remark" v-if="item.description">
              <span class="content-list__item-remark">说明：</span>
              <span v-html="item.description"></span>
            </div>
            <div v-if="item.attachmentFileInfoDTOList?.length > 0">
              <span class="content-list__item-remark">附件：</span>
              <span @click="onPreview(n)" class="content-list__item-file" v-for="n of item.attachmentFileInfoDTOList"
                :key="n.id">{{ n.name }}</span>
            </div>
          </div>
        </div>
        <div v-else>
          <el-empty description="暂无数据" />
        </div>
      </div>
    </template>
  </el-drawer>
</template>

<script lang="ts" setup>
import { ProjectNoticeDetailVO } from '@/api/project/types';
import { auditLogApi } from '@/api/resultsManagement';
import { ApprovalPageRespVO } from '@/types/resultsManagement';

const emits = defineEmits(['cancel', 'ok', 'update:visible'])

const list = ref<ProjectNoticeDetailVO[]>([])
const contentRef = ref()

const { proxy } = getCurrentInstance();

// const pagination = reactive({
//   page: 1,
//   size: 20, // 默认每页显示数量
//   total: 0,
//   showTotal: true,
//   showJumper: true,
//   showQuickJumper: true, // 跳转分页
//   showPageSize: true,
// })

// const loading = ref(false)
// const route = useRoute()

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  projectId: {
    type: String,
    default: ''
  }
})

const { runAsync: getRecordPage } = useRequest(auditLogApi, {
  manual: true,
  onSuccess: (res: ApprovalPageRespVO[]) => {
    list.value = res
  }
})

watch(
  () => props.visible,
  val => {
    if (val) {
      getRecordPage({ logId: props.projectId, type: 4 })
    }
  },
  {
    immediate: true
  }
)

const onPreview = (item: ProjectNoticeDetailVO) => {
  console.log(item, 'item');
  emits('update:visible', false)
  proxy.$preview.open({
    src: item.url,
  })
}

</script>

<style scoped lang="scss">
.content {
  --at-apply: flex flex-col h-full mt-[-20px];

  &-list {
    --at-apply: flex flex-col gap-16px ml-10px;

    &__item {
      --at-apply: flex flex-col px-16px pt-0 relative;

      &::after {
        --at-apply: absolute top-0 left-0 h-full w-1px bg-#E5E6EB;
        content: "";
      }

      &::before {
        --at-apply: absolute top-0 left-[-3px] h-7px w-7px bg-#3491fa rounded-full z-1;
        content: "";
      }


      &:last-child {
        &::after {
          --at-apply: hidden;
        }
      }

      &-l {
        // --at-apply: mb-32px;
      }

      &-opt {
        --at-apply: text-14px text-#1D2129;

        &-1 {
          color: #00B42A;
        }
        &-2 {
          color: #F53F3F;
        }
        &-3 {
          color: #F53F3F;
        }
        // &-4 {
        //   color: #ddd;
        // }
        &-5 {
          color: #3491FA;
        }
      }

      &-action {
        --at-apply: text-12px text-#86909C mb-4px;
      }

      &-remark {
        --at-apply: text-14px text-#000 mb-4px;
      }

      &-file {
        --at-apply: text-14px text-#165DFF mb-4px mr-13px cursor-pointer;
      }

      &-fail {
        &::before {
          --at-apply: bg-#F53F3F;
        }
      }
    }
  }
}
</style>

<style lang="scss">
.auditRecordDrawerClass {
  .el-drawer__header {
    border-bottom: 1px solid #E5E6EB;
    padding-bottom: 16px;
    margin-bottom: 24px;
  }
}
</style>